<template>
  <div id="chartLog" class="maxbox"></div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            chart: null
        };
    },
    created() { },
    mounted() {
        this.$nextTick(() => {
            this.creatChart();
            $(window).resize(() => {
                if (this.chart) this.chart.resize();
            });
        });
    },
    methods: {
        creatChart() {
            const option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}<br>{c} '
                    /* axisPointer: {
                        animation: false
                    } */
                    /* padding: 5, // 提示框浮层内边距，
                    backgroundColor: '#16bcc3', // 提示框浮层的背景颜色。
                    borderColor: '#fff', // 提示框浮层的边框颜色
                    borderWidth: 1, // 提示框浮层的边框宽。
                    textStyle: { // 提示框浮层的文本样式。
                        color: '#fff',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontSize: 14
                    } */
                },
                grid: {
                    left: '20px',
                    right: '20px',
                    top: '15px',
                    bottom: '15px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['站点A', '站点B', '站点C', '站点D', '站点F']
                },
                yAxis: {
                    type: 'value',
                    splitLine: { // 网格线
                        show: true,
                        lineStyle: {
                            color: ['#8b8b98'],
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
                series: [{
                    data: [50, 40, 45, 20, 55],
                    type: 'line',
                    symbolSize: 7,
                    // color: ['red'], // 折线条的颜色
                    // symbol: 'circle', // 转折点样式
                    // sampling: 'lttb',

                    itemStyle: {
                        color: '#00ffff'
                    },
                    lineStyle: {
                        width: 1
                    }
                    /* areaStyle: {
                        // eslint-disable-next-line no-undef
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(4, 208, 212)'
                        }, {
                            offset: 1,
                            color: 'rgba(4, 208, 212, .1)'
                        }])
                    } */
                }]
            };

            this.chart = echarts.init(document.getElementById('chartLog'));
            this.chart.setOption(option);
        }
    }
};
</script>

<style lang="less" scoped>

</style>
